<!DOCTYPE html>
<html lang="en" xmlns:v-on="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>小红柜</title>
    <script  type="text/javascript" src="./js/vue/vue.js"></script>
    <script type="text/javascript" src="./js/vue/vue-router.js"></script>
    <!--<script src="./js/index.js"></script>-->
    <link rel="stylesheet" href="./css/index.css">
</head>
<body>
    <div id="app">
        <my-header></my-header>
        <router-view></router-view>
    </div>
    <template id="main-frame">
        <div>
            <service-display></service-display>
            <service-intro></service-intro>
            <my-footer></my-footer>
            <button v-on:click="wannaMaintain()" id="maintain-btn">维护</button>
        </div>
    </template>
    <template id="deposit-service">
        <div>
            <deposit-display></deposit-display>
            <pay-standard></pay-standard>
        </div>
    </template>
    <template id="withdraw-service">
        <div class="input-div">
            <img src="./img/WeChatOfficialAccount.845ef4d.jpg" alt="">
            <p>支持 微信，支付宝</p>
            <payment-information></payment-information>
        </div>
    </template>
    <template id="payment-service">
        <div class="input-div">
            <form>
                <label>身份证号：</label><input type="text">
            </form>
            <img src="./img/WeChatOfficialAccount.845ef4d.jpg" alt="">
            <p>支持 微信，支付宝</p>
            <indication-explain></indication-explain>
        </div>
    </template>
    <template id="maintain-service">
        <div class="input-div">
            <label>管理员身份密码</label>
            <input type="text"><br>
            <label>请输入身份证号</label>
            <input type="text">
        </div>
    </template>
    <template id="header-tem">
        <div id="header-div">
            <p>{{ header }}</p>
        </div>
    </template>
    <template id="service-display-tem">
        <div id="service-display-div">
            <button v-on:click="wannaDeposit()" class="btn left-btn">寄存物品</button>
            <button v-on:click="wannaWithdraw()" class="btn right-btn">取走物品</button>
            <p>空闲格口数:{{ cages_remain }}个</p>
        </div>
    </template>
    <template id="deposit-display-tem">
        <div id="deposit-display-div">
            <button v-on:click="makeDeposit()" class="btn left-btn">
                大寄存柜
                <p>空闲格口数:{{ big_cage_remain }}</p>
                <p>尺寸大小:{{ big_cage_size }}</p>
            </button>
            <button v-on:click="makeDeposit()" class="btn right-btn">
                小寄存柜
                <p>空闲格口数:{{ small_cage_remain }}</p>
                <p>尺寸大小:{{ small_cage_size }}</p>
            </button>
        </div>
    </template>
    <template id="footer-tem">
        <div id="footer-div">
            <p>服务热线：{{ service_hotline }}</p>
        </div>
    </template>
    <template id="service-intro-tem">
        <div class="right-panel">
                <div id="service-intro-div" class="intro-div">
                        <p>服务介绍</p>
                        <ul>
                            <li v-for="introduction in service_introduction">
                                {{ introduction }}
                            </li>
                        </ul>
                    </div>
        </div>
        
    </template>
    <template id="pay-standard-tem">
        <div class="right-panel">
                <div id="pay-standard-div" class="intro-div">
                        <p>收费标准</p>
                        <ol>
                            <li v-for="standard in pay_standards">{{ standard }}</li>
                        </ol>
                    </div>
        </div>
        
    </template>
    <template id="indication-explain-tem">
        <div class="right-panel">
                <div id="indication-explain-div" class="intro-div">
                        <p>提示说明</p>
                        <ol>
                            <li v-for="indication in indications">{{ indication }}</li>
                        </ol>
                    </div>
        </div>
        
    </template>
    <template id="payment-information-tem">
        <div class="right-panel">
                <div id="payment-information-div" class="intro-div">
                        <p>消费信息</p>
                        <ul>
                            <li>取物人：{{ payment_info.username }}</li>
                            <li>取物时间：{{ payment_info.withdraw_time }}</li>
                            <li>寄存时间：{{ payment_info.deposit_time }}</li>
                            <li>货柜尺寸：{{ payment_info.cage_size }}</li>
                            <li>消费金额：{{ payment_info.consume_amount }}元</li>
                            <li>支付金额：{{ payment_info.payment_amount }}元</li>
                        </ul>
                    </div>
        </div>
        
    </template>

    <script>
        var header = Vue.component('my-header', { 
            template: '#header-tem',
            data: function(){
                return {
                    header: '小红柜',
                }
            }
        });
        var footer = Vue.component('my-footer', { 
            template: '#footer-tem',
            data: function(){
                return {
                    service_hotline: '123456',
                }
            } 
        });
        var service_intro = Vue.component('service-intro', {
            template: '#service-intro-tem',
            data: function(){
                return {
                    service_introduction: [
                        '存取物品是小红柜提供给用户的主要功能。',
                        '如何寄存：点击寄存物品，选择寄存柜大小，扫描微信、支付宝二维码付费，柜门打开，存入物品，关闭柜门。',
                        '如何取：点击取出物品，扫描微信、支付宝二维码，结算费用，柜门打开，取出物品，关闭柜门。',
                    ]
                }
            }
        });
        var deposit_disp = Vue.component('deposit-display', {
            template: '#deposit-display-tem',
            data: function(){
                return {
                    big_cage_remain: 11,
                    small_cage_remain: 11,
                    big_cage_size: 50,
                    small_cage_size: 40,
                }
            },
            methods: {
                makeDeposit: function(){
                    this.$router.push('pay');
                }
            }
        });
        var service_disp = Vue.component('service-display', {
            template: '#service-display-tem',
            data: function(){
                return {
                    cages_remain: 22
                }
            },
            computed: {
                cages_remain: function(){
                    console.log(deposit_disp.big_cage_remain)
                },
            },
            methods: {
                wannaDeposit: function(){
                    this.$router.push('/deposit');
                },
                wannaWithdraw: function(){
                    this.$router.push('/withdraw');
                }
            }
        });
        var pay_standard = Vue.component('pay-standard', {
            template: '#pay-standard-tem',
            data: function(){
                return {
                    pay_standards: [
                        '大寄存柜每小时收费3元，超过8小时，以一天计费，每天收费24元，超过48小时，您没有取走您的物品，我公司有权处理您寄存的物品。',
                        '小寄存柜每小时收费2元，超过8小时，以一天计费，每天收费16元，超过48小时，您没有取走您的物品，我公司有权处理您寄存的物品。',
                        '寄存物品重量不要超过10公斤。',
                        '贵重物品请随身携带，不要寄存。',
                    ]
                }
            }
        });
        var indication_exp = Vue.component('indication-explain', {
            template: '#indication-explain-tem',
            data: function(){
                return {
                    indications: [
                        '需要预支付寄存柜的一小时的寄存费用。',
                        '需要您提供身份证信息。',
                    ]
                }
            }
        });
        var payment_info = Vue.component('payment-information', {
            template: '#payment-information-tem',
            data: function(){
                return {
                    payment_info: {
                        username: 'Zero',
                        withdraw_time: new Date(),
                        deposit_time: new Date(),
                        cage_size: '大',
                        consume_amount: '100',
                        payment_amount: '100',
                    }
                }
            }
        });

        const MainFrame = { template: '#main-frame',
            methods: {
                wannaMaintain: function(){
                    this.$router.push('/maintain');
                }
            } 
        };
        const DepositService = { template: '#deposit-service' };
        const WithdrawService = { template: '#withdraw-service' };
        const PaymentService = { template: '#payment-service' };
        const MaintainService = { template: '#maintain-service' };

        const routes = [
            { path: '/', component: MainFrame },
            { path: '/deposit', component: DepositService },
            { path: '/withdraw', component: WithdrawService },
            { path: '/pay', component: PaymentService },
            { path: '/maintain', component: MaintainService},
        ]
        const router = new VueRouter({ routes });
        const app = new Vue({ router }).$mount('#app');
    </script>
</body>
</html>